<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .bg{
        background-color: red;
        width: 200px;
        height: 200px;
    }
</style>
<body>
    <div class="bg" id="bg">

    </div>
</body>
<script>
    //单击事件
    //在JavaScript中，为HTML元素动态添加事件处理函数
  // document.getElementById("but1").onclick = function(){
  // }


  //获取ID值是特定值的网页元素在JavaScript中的表示方式
    var bg = document.getElementById("bg");
    bg.onclick = function(){
        alert("div被点击了");
    }

    //当鼠标箭头移动到div上时，在控制台打印输出
    //鼠标箭头移上了div
    bg.onmouseover = function(){
        console.log("鼠标箭头移上了div");
    }
    bg.onmouseout = function(){
        console.log("鼠标箭头移出了div");
    }
    bg.onmousemove = function(){
        console.log("在div上鼠标箭头移动了");
    }
</script>
</html>